<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>编辑出库单</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { font-family: "Microsoft YaHei", sans-serif; background: #f5f5f5; margin: 0; padding: 0; }
    .container { max-width: 960px; margin: 20px auto; background: #fff; padding: 20px; border-radius: 6px;
                 box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
    h2 { margin-bottom: 20px; font-size: 18px; }

    .form-row { display: flex; gap: 20px; margin-bottom: 15px; }
    .form-group { flex: 1; }
    label { display: block; font-size: 14px; margin-bottom: 6px; font-weight: bold; }
    input, select { width: 100%; padding: 6px; border: 1px solid #ccc; border-radius: 4px; }

    table { width: 100%; border-collapse: collapse; margin-top: 15px; }
    th, td { border: 1px solid #ddd; padding: 8px; text-align: center; font-size: 14px; }
    th { background: #f8f8f8; }

    .btn { padding: 6px 14px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }
    .btn.add { background: #00b96b; color: #fff; margin-bottom: 10px; }
    .btn.small { padding: 4px 8px; margin: 0 2px; }
    .btn.edit { background: #409eff; color: #fff; }
    .btn.delete { background: #f56c6c; color: #fff; }

    .actions { display: flex; justify-content: flex-end; gap: 15px; margin-top: 20px; }
    .btn.cancel { background: #f5f5f5; color: #333; }
    .btn.save { background: #00b96b; color: #fff; }
  </style>
</head>
<body>
  <div class="container">
    <h2>编辑出库单</h2>

    <!-- 基本信息 -->
    <div class="form-row">
      <div class="form-group">
        <label>出库单号</label>
        <input type="text" value="IN20250001" readonly>
      </div>
      <div class="form-group">
        <label>仓库</label>
        <select>
          <option selected>成品仓 | CP</option>
          <option>原料仓 | RM</option>
        </select>
      </div>
    </div>

    <div class="form-row">
      <div class="form-group">
        <label>出库类型</label>
        <select>
          <option selected>普通出库</option>
          <option>退货出库</option>
        </select>
      </div>
      <div class="form-group">
        <label>出库时间</label>
        <input type="datetime-local" value="2025-08-08T12:32">
      </div>
    </div>

    <!-- 出库明细 -->
    <h3>出库明细</h3>
    <button class="btn add" onclick="addRow()">+ 添加产品</button>
    <table id="detailTable">
      <thead>
        <tr>
          <th>序号</th>
          <th>产品编号</th>
          <th>产品名称</th>
          <th>产品规格</th>
          <th>当前库存数</th>
          <th>出库数量</th>
          <th>单位</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>CP20250005</td>
          <td>鸡腿</td>
          <td>-</td>
          <td>4</td>
          <td><input type="number" value="4" class="qty" onchange="updateTotal()"></td>
          <td>只</td>
          <td>
            <button class="btn small edit">编辑</button>
            <button class="btn small delete" onclick="deleteRow(this)">删除</button>
          </td>
        </tr>
        <tr>
          <td>2</td>
          <td>CP20250006</td>
          <td>鸡翅</td>
          <td>-</td>
          <td>4</td>
          <td><input type="number" value="4" class="qty" onchange="updateTotal()"></td>
          <td>只</td>
          <td>
            <button class="btn small edit">编辑</button>
            <button class="btn small delete" onclick="deleteRow(this)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <p style="text-align: right; margin-top: 10px;">合计：<span id="totalQty">8</span></p>

    <!-- 操作按钮 -->
    <div class="actions">
      <button class="btn cancel">取消</button>
      <button class="btn save" onclick="saveForm()">保存</button>
    </div>
  </div>

  <script>
    // 添加行
    function addRow() {
      const table = document.querySelector("#detailTable tbody");
      const rowCount = table.rows.length + 1;
      const row = table.insertRow();
      row.innerHTML = `
        <td>${rowCount}</td>
        <td>CP2025${Math.floor(Math.random()*10000)}</td>
        <td>新产品</td>
        <td>-</td>
        <td>0</td>
        <td><input type="number" value="0" class="qty" onchange="updateTotal()"></td>
        <td>只</td>
        <td>
          <button class="btn small edit">编辑</button>
          <button class="btn small delete" onclick="deleteRow(this)">删除</button>
        </td>
      `;
      updateTotal();
    }

    // 删除行
    function deleteRow(btn) {
      const row = btn.closest("tr");
      row.remove();
      updateTotal();
    }

    // 更新合计
    function updateTotal() {
      let total = 0;
      document.querySelectorAll(".qty").forEach(input => {
        total += Number(input.value) || 0;
      });
      document.getElementById("totalQty").textContent = total;
    }

    // 保存
    function saveForm() {
      updateTotal();
      alert("出库单已保存，总数量：" + document.getElementById("totalQty").textContent);
    }
  </script>
</body>
</html>
